<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页布局</title>
</head>
<body>
<div class="header">
    <h1>我是大脑</h1>
</div>
<div class="nav">
    
        <a href="#">百度</a>
        <a href="#">谷歌</a>
        <a href="#">搜狐</a>
   
</div>
<div class="row">
    <div class="column side">
        <h2>一楼</h2>
        <p>一楼一楼一楼一楼一楼一楼一楼一楼一楼一楼一楼一楼一楼一楼一楼一楼一楼一楼一楼一楼
            一楼一楼一楼一楼一楼一楼一楼一楼一楼一楼一楼一楼一楼一楼一楼一楼一楼一楼一楼一楼
            一楼一楼一楼一楼一楼一楼一楼一楼一楼一楼一楼一楼一楼一楼一楼一楼一楼一楼一楼一楼
        </p>
    </div>
    <div class="column middle">
        <h2>二楼</h2>
        <p>二楼二楼二楼二楼二楼二楼二楼二楼二楼二楼二楼二楼二楼二楼二楼二楼二楼二楼二楼
            二楼二楼二楼二楼二楼二楼二楼二楼二楼二楼二楼二楼二楼二楼二楼二楼二楼二楼二楼
            二楼二楼二楼二楼二楼二楼二楼二楼二楼二楼二楼二楼二楼二楼二楼二楼二楼二楼二楼
        </p>
    </div>
    <div class="column side">
        <h2>三楼</h2>
        <p>三楼三楼三楼三楼三楼三楼三楼三楼三楼三楼三楼三楼三楼三楼三楼三楼三楼三楼三楼三楼
            三楼三楼三楼三楼三楼三楼三楼三楼三楼三楼三楼三楼三楼三楼三楼三楼三楼三楼三楼三楼
            三楼三楼三楼三楼三楼三楼三楼三楼三楼三楼三楼三楼三楼三楼三楼三楼三楼三楼三楼三楼
        </p>
    </div>
</div>
<div class="footer">
    <p>底部区域</p>
</div>
</body>
<style>
    .footer{

        padding: 20px;
        background-color: #999999;
    }
    .row::after{
        clear: both;
        display: table;
        content: "";

    }
    @media screen and (max-width: 600px){
        .column{
            width: 100%;  clear: both;
        }
    }
    .column{
        float: left;


    }
    .middle{
        width: 60%;
    }
    .side{
        width: 20%;
    }
    body{
        margin: 0;

    }
    *{
        box-sizing: border-box;
    }
    .header{
        background-color: #999999;
        text-align: center;
        padding: 20px;
    }
    .nav a{
        float: left;
        display: block;
        padding: 20px;
        text-decoration: none;
        color: white;

    }
    .nav{
        background-color:black;
        overflow: hidden;
    }
    .nav a:hover{
        background-color: #999999;
        color: black;
    }
</style>

</html>